<template>
  <div>
    <a-button type="primary" @click="open = true" block><plus-outlined/>创建组织</a-button>
    <a-modal title="创建组织" v-model:open="open" :footer="false" :width="420">
      <a-form layout="vertical" ref="formRef" :model="form">
        <a-form-item label="组织名称"
                     name="name"
                     :rules="[{required: true, message: '请输入组织名称',trigger: 'blur'}]">
          <a-input show-count
                   v-model:value="form.name"
                   :maxlength="20"
                   placeholder="请输入企业/组织/团队名称，20字以内"/>
        </a-form-item>
        <a-form-item label="描述" name="description">
          <a-textarea placeholder="请输入组织描述信息（选填）"
                      v-model:value="form.description"
                      :rows="3"
                      show-count
                      :maxlength="50"/>
        </a-form-item>
        <a-button type="primary" size="large" :loading="loading" @click="handleOk" block>
          立即创建
        </a-button>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {PlusOutlined} from "@ant-design/icons-vue";
import {reactive, ref} from "vue";
import {getUserId} from "@/utils/auth.ts";
import type {FormInstance} from "ant-design-vue";
import {useOrgStore} from "@/store/modules/organization";
import useMessage from "@/utils/useMessage.ts";

const orgStore = useOrgStore()
const open = ref<boolean>(false)
const loading = ref<boolean>(false)
const formRef = ref<FormInstance>()
const form = reactive<OrganizationFormType>({
  user_id: getUserId(),
  name: '',
  description: ''
})

const handleOk = async () => {
  try {
    loading.value = true
    await formRef.value?.validate()
    const res = await orgStore.create(form)
    useMessage(res.code, res.message)
    if (res.code === 200) {
      open.value = false
    }
  } catch (error) {
    useMessage(500, '创建组织失败'+error)
  } finally {
    setTimeout(()=>loading.value = false,3000)
  }
}
</script>

<style scoped>

</style>